<template>
    <div class="header">
        <div class="header-content">
            <div class="header-left">
                <span class="user-undo" @click="handleUndo" style="cursor:pointer;color:#fff;margin-right:16px;">
                    撤销账号
                </span>
                <span class="user-home" @click="goHome" style="cursor:pointer;color:#fff;">
                    回到首页
                </span>
            </div>
            <div class="header-title">学生组织管理系统SOMS</div>
            <div class="header-user">
                <span class="user-logout" @click="handleUndoexit" style="cursor:pointer;color:#fff;margin-right:16px;">
                    退出登录
                </span>
                <span class="user-name">欢迎你！用户{{ userName }}</span>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'
import { ElMessageBox, ElMessage } from 'element-plus'
import { useRouter } from 'vue-router';

const router = useRouter();
const userName = localStorage.getItem('loginId');
const handleUndo = () => {
    ElMessageBox.confirm(
        '确定要撤销吗？',
        '撤销确认',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }
    ).then(async () => {
        // 发送撤销（注销账号）请求到后端
        try {
            const orgId = localStorage.getItem('loginId');
            await axios.delete(`http://localhost:8080/student/${orgId}`);
            ElMessage.success('撤销成功！');
        } catch (error) {
            ElMessage.error('撤销操作已执行，但通知后端失败');
        }
        router.push('/soLogin');
    }).catch(() => {
        ElMessage.info('已取消撤销');
    });
}
const handleUndoexit = () => {
    // 清除本地登录信息
    localStorage.removeItem('loginId');
    // 跳转到登录页
    router.push('/stuLogin');
}
const goHome = () => {
    router.push('/stuMain');
}
</script>

<style scoped>
.header {
    width: 100%;
    height: 60px;
    background-color: #05b6f6;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
}

.header-content {
    width: 100%;
    max-width: 1200px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-left {
    display: flex;
    align-items: center;
    flex: 1;
}

.header-title {
    font-size: 24px;
    text-align: center;
    flex: 2;
}

.header-user {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex: 1;
}
</style>